<template>
  <div class="BuildingnoList-box">
      <div class="title">
          <span>物业管理公司列表</span>
      </div>
      <div class="index-middlebox">
          <div class="middle-item">
              <!-- <span>商品名称</span> -->
              <template>
                  <el-input class="productname-input" placeholder="物业管理公司名称/联系人/联系方式" v-model="seachname" @change="getqueryPropertyCompanyList"></el-input>
              </template>
          </div>
          <div class="middle-item" style="width:300px;">
              <template>
                  <el-button type="primary" class="search" @click="handleSelectionChange">新增</el-button>
                  <!-- <el-button type="primary" class="search2">新增收货单</el-button> -->
                   <el-dialog
                            :title="title"
                            :visible.sync="dialogVisible"
                            width="60%"
                            >
                            <div class="dia-box">
                                <div class="box-item">
                                    <span>物业管理公司名称</span>
                                    <el-input class="productname-input2" v-model="companyName"></el-input>
                                </div>
                                <div class="box-item">
                                    <span>联系人</span>
                                    <el-input class="productname-input2" v-model="principalName"></el-input>
                                </div>
                                <div class="box-item">
                                    <span>小区名称</span>
                                    <el-input class="productname-input2" v-model="compoundName"></el-input>
                                </div>
                                <div class="box-item">
                                    <span>联系方式</span>
                                    <el-input class="productname-input2" maxlength="11" v-model="principalPhone"></el-input>
                                </div>
                                <div class="box-item">
                                    <span>地址</span>
                                    <el-input class="productname-input2" v-model="compoundSite"></el-input>
                                </div>
                                <div class="box-item">
                                    <span>结算截止日期</span>
                                    <el-input class="productname-input2" v-model="settlementEndTime"></el-input>
                                </div>
                            </div>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="getsavePropertyCompany">确 定</el-button>
                            </span>
                    </el-dialog>
              </template>
          </div>
      </div>
      <div class="index-list-box">  
        <template>
                <el-table :data="merchandiseList"
                        border
                        style="width: 100%" >
                <el-table-column 
                                label="序号"
                                type="index"
                                 align="center">
                </el-table-column>
                <el-table-column prop="companyName"
                                label="物业管理公司名称"
                                 align="center">
                </el-table-column>
                <el-table-column prop="compoundName"
                                label="小区名称"
                                 align="center">
                </el-table-column>
                <el-table-column prop="compoundSite"
                                label="地址"
                                 align="center">
                </el-table-column>
                <el-table-column prop="principalName"
                                label="联系人"
                                align="center">
                </el-table-column>
                <el-table-column prop='principalPhone'
                                label="联系方式"
                                 align="center">
                </el-table-column>
                <el-table-column prop='settlementEndTime'
                                label="结算截止日期"
                                 align="center">
                </el-table-column>
                <el-table-column fixed="right"
                                label="操作"
                                 align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="updatePropertyCompany(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" @click="getdeletePropertyCompany(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
                </el-table>
            </template>
      </div>
      <!-- 分页器 -->
      <div class="current">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="10"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getqueryPropertyCompanyList, getsavePropertyCompany, getupdatePropertyCompany, getdeletePropertyCompany, getcreateManagementAccount} from "@/api/PropertyManagement";
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
        merchandiseList:[],
        seachname:'',
        value: '',
        date: '',
        dialogVisible:false,
        total: 0, // 用户总条数
        pagesize: 10, //每页显示多少条，默认为10条
        pageNo: 1, // 当前页码，默认为第一页
        companyName:'',//物业管理公司名称
        compoundName:'',//小区名称
        compoundSite:'',//地址
        principalName:'',//联系人
        principalPhone:'',//联系方式
        settlementEndTime:'',//结算截止日期
        title:'新增物业管理公司',
        show:0,//是新增还是编辑
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
      this.getqueryPropertyCompanyList()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
      handleSelectionChange(){
          this.show = 0
        this.companyName = ''
        this.compoundName = ''
        this.compoundSite = ''
        this.principalName = ''
        this.principalPhone = ''
        this.companyId = ''
        this.settlementEndTime = ''
        this.dialogVisible = true
      },
      //获取物业公司列表
      getqueryPropertyCompanyList(){
          let data = {
              pageNo: this.pageNo,
              pagesize: this.pagesize,
              requestParam:this.seachname
          }
          getqueryPropertyCompanyList(data).then(res => {
              this.merchandiseList = res.rows
              this.pageNo = res.pageNo
              this.pagesize = res.pageSize
              this.total = res.total
          })
      },
      handleSizeChange(val) {
        this.pagesize = val;
        this.getqueryPropertyCompanyList();
      },
      handleCurrentChange(val) {
        this.pageNo = val;
        this.getqueryPropertyCompanyList();
      },
      //   新增物业公司 和编辑物业公司
      getsavePropertyCompany(){
          let show = this.show
          let data = {
              companyName:this.companyName,
              compoundName:this.compoundName,
              compoundSite:this.compoundSite,
              principalName:this.principalName,
              principalPhone:this.principalPhone,
              settlementEndTime:this.settlementEndTime,
              companyId:this.companyId
          }
          let data2 = {
                name: this.principalName,
                userName: this.principalPhone,
                phone: this.principalPhone
            }
          if(show == 0){
            getsavePropertyCompany(data).then(res => {
                console.log('新增物业公司',res)
                this.dialogVisible = false
                this.$message(res.msg)
                this.getqueryPropertyCompanyList()
            })
            getcreateManagementAccount(data2).then(res => {
                if(res.code == -1){
                    this.$message(res.msg)
                }
            })
          }else if(show == 1){
            getupdatePropertyCompany(data).then(res => {
                this.dialogVisible = false
                this.$message(res.msg)
                this.getqueryPropertyCompanyList()
            })
          }
      },
      // 点击编辑
      updatePropertyCompany(index,row){
          this.title = '编辑物业管理公司'
          this.dialogVisible = true
          this.show = 1
          this.companyName = row.companyName
          this.compoundName = row.compoundName
          this.compoundSite = row.compoundSite
          this.principalName = row.principalName
          this.principalPhone = row.principalPhone
          this.settlementEndTime = row.settlementEndTime
          this.companyId = row.companyId
      },
      // 删除物业管理公司
      getdeletePropertyCompany(index,row){
          getdeletePropertyCompany(row.companyId).then(res => {
              this.$message(res.msg)
              this.getqueryPropertyCompanyList()
          })
      }  
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.BuildingnoList-box{
    width: 100%;
    .title{
        width: 100%;
        padding:20px 40px 20px 40px;
        box-sizing: border-box;
        span{
            font-size: 20px;
            font-weight: bold;
        }
    }
    .index-middlebox{
        width: 100%;
        padding-left: 40px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        .middle-item{
            span{
                display: inline-block;
                font-size: 14px;
                padding-right: 15px;
                padding-left: 30px;
                box-sizing: border-box;
            }
            .productname-input{
                width: 300px;
            }
            .productname-input2{
                width: 250px;
            }
            .search{
                width: 120px;
                margin-left:20px;
            }
            .search2{
                width: 120px;
                margin-left:20px;
            }
        }
    }
    .index-list-box{
        width: 100%;
        padding: 30px 40px;
        box-sizing: border-box;
    }
    .dia-box{
        width: 100%;
        text-align: center;
        .box-item{
            display: inline-block;
            margin-bottom: 10px;
        }
    }
    .current {
      .block {
        text-align: center;
      }
    }
}
</style>
